<template>
  <el-dialog title="题目预览" :visible="showDialog" @close="btnCancel">
    <div class="box1">
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】: {{ details.questionType | Question }}
          </div></el-col
        >

        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【编号】: {{ details.id }}
          </div></el-col
        >

        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】: {{ details.difficulty | difficulty }}
          </div></el-col
        >

        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【标签】: {{ details.tags }}
          </div></el-col
        >

        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】: {{ details.subjectName }}
          </div></el-col
        >

        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【目录】: {{ details.directoryName }}
          </div></el-col
        >

        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】: {{ details.direction }}
          </div></el-col
        >
      </el-row>
    </div>

    <div class="box2">
      <el-row>
        <el-col :span="24" class="ecol"
          ><div class="grid-content bg-purple-dark">
            【题干】: {{ details.question | html2Text }}
          </div></el-col
        >
        <el-col :span="24" class="ecol"
          ><div class="grid-content bg-purple-dark">

            <el-row style="margin-bottom: 15px">{{ details.questionType | Question }} 选项:(以下选中的选项为正确答案)</el-row>
            <el-row v-if="details.questionType==1">
              <el-col v-for="item in details.options" :key="item.id">
                <!-- <el-radio v-model="item.isRight" label="1">{{item.code}} : {{item.title}}</el-radio> -->
                <input type="radio" disabled :checked="item.isRight==1" name="isRight">{{item.code}} : {{item.title}}
              </el-col>
            </el-row>
            <el-row v-else-if="this.details.questionType==2">
              <el-col v-for="item in details.options" :key="item.id">
                <el-checkbox disabled :checked="item.isRight==1">{{item.code}} : {{item.title}}</el-checkbox>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col>
                <span>1</span>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="box3">
      <el-row>
        <el-col :span="24" class="ecol"
          ><div class="grid-content bg-purple-dark">
            【参考答案】:
            <el-button type="danger" @click="show = !show"
              >视频答案预览</el-button
            ><br />
            <video v-if="show" :src="details.videoURL"></video></div
        ></el-col>
      </el-row>
    </div>

    <div class="box3">
      <el-row>
        <el-col :span="24" class="ecol"
          ><div class="grid-content bg-purple-dark">
            【答案解析】: {{ details.answer | html2Text }}
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="box4"></div>

    <el-row>
      <el-col :span="24" class="ecol"
        ><div class="grid-content bg-purple-dark">
          【题目备注】: {{ this.details.remarks }}
        </div></el-col
      >

      <el-button type="primary" style="float: right" @click="btnCancel"
        >关闭</el-button
      >
    </el-row>
  </el-dialog>
</template>
<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
import { detail } from '@/api/hmmm/questions'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      details: [],
      show: false,
      check: true
    }
    // },
    // created () {
    //  this.detail()
  },
  filters: {
    difficulty (value) {
      if (value) return difficulty.find(item => item.value === +value).label
    },

    Question (value) {
      if (value) return questionType.find(item => item.value === +value).label + '题'
    }
  },
  methods: {
    btnCancel () {
      this.$emit('update:showDialog', false) // 关闭弹窗
    },
    async detail (data) {
      // console.log(data)
      const results = await detail(data)
      // console.log(results)
      this.details = results.data
      // console.log(this.details)
    }
  }
}
</script>

<style scoped>
.box1 {
  border-bottom: 1px solid rgb(104, 104, 104);
}

.el-col {
  margin-bottom: 18px;
}
.box2 {
  margin: 10px 0;
  border-bottom: 1px solid rgb(104, 104, 104);
}
.box3 {
  margin: 6px 0;
  border-bottom: 1px solid rgb(104, 104, 104);
}
</style>
